<template>
  <div class="tag-content-header">
    <div class="content-title clearfix">
      <div class="title-box">
        <slot name="title"></slot>
      </div>
      <div class="content-tools">
        <slot name="toolsPre"></slot>
        <el-tooltip v-if="search" effect="dark" content="搜索" placement="top">
          <el-button type="primary" icon="el-icon-search" plain circle @click="toolFun('search', $event)"></el-button>
        </el-tooltip>
        <el-tooltip v-if="refresh" effect="dark" content="刷新" placement="top">
          <el-button type="primary" icon="el-icon-refresh" plain circle @click="toolFun('refresh', $event)"></el-button>
        </el-tooltip>
        <el-tooltip v-if="setting" effect="dark" content="配置显示项" placement="top">
          <el-button v-popover:settingPopover type="primary" plain circle>
            <icon-svg name="iconSetting"></icon-svg>
          </el-button>
        </el-tooltip>
        <slot name="toolsMid"></slot>
        <el-button v-if="add" type="primary" class="addBtn" @click="toolFun('add', $event)">
          <i class="el-icon-plus"></i>新增
        </el-button>
        <el-tooltip v-if="spread" effect="dark" content="全部展开" placement="top">
          <el-button type="primary" plain circle @click="toolFun('spread', $event)">
            <icon-svg name="iconWdown"></icon-svg>
          </el-button>
        </el-tooltip>
        <el-tooltip v-if="fold" effect="dark" content="全部收缩" placement="top">
          <el-button type="primary" plain circle @click="toolFun('fold', $event)">
            <icon-svg name="iconWup"></icon-svg>
          </el-button>
        </el-tooltip>
        <slot name="tools"></slot>
      </div>
    </div>
    <p v-if="summaryShow" ref="summaryBox" class="summary-box">
      <slot name="summary"></slot>
    </p>
    <el-popover
      ref="settingPopover"
      :popper-class="'tag-content-header-setting tag-scrollbar ' + settingClass"
      placement="bottom"
      trigger="click"
    >
      <div class="content-setting-item" v-for="item in settingData" :key="item.prop" v-show="item.show !== 'fixed'">
        <el-checkbox v-model="item.show">{{ item.label }}</el-checkbox>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'tag-content-header',
  props: {
    summary: {
      type: Boolean,
      default: false
    },
    history: {
      type: Boolean,
      default: false
    },
    search: {
      type: Boolean,
      default: false
    },
    add: {
      type: Boolean,
      default: false
    },
    refresh: {
      type: Boolean,
      default: false
    },
    setting: {
      type: Boolean,
      default: false
    },
    spread: {
      type: Boolean,
      default: false
    },
    fold: {
      type: Boolean,
      default: false
    },
    settingClass: {
      default: ''
    },
    settingData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      summaryShow: false
    }
  },
  methods: {
    showSummary() {
      this.summaryShow = !this.summaryShow
      this.$nextTick(() => {
        if (this.summaryShow) {
          this.$emit('setSummaryHeight', this.$refs.summaryBox.offsetHeight + 6)
        } else {
          this.$emit('setSummaryHeight', 0)
        }
      })
    },
    toolFun(operation, event) {
      var dom = event.currentTarget
      dom.blur()
      this.$emit('toolFun', operation)
    }
  }
}
</script>

<style lang="scss">
.tag-content-header {
  margin-bottom: 10px;
  .title-box {
    float: left;
    height: 30px;
    line-height: 30px;
    color: $theme-color;
    span {
      padding: 0 10px;
      font-size: 16px;
      font-weight: bold;
      vertical-align: sub;
      position: relative;
      svg {
        margin-right: 5px;
      }
      &:before {
        width: 3px;
        content: '';
        background-color: $theme-color;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
  .content-tools {
    float: right;
    height: 30px;
    line-height: 30px;
    .el-button {
      padding: 4px;
    }
    i,
    .icon-svg {
      font-size: 14px;
    }
    > span + .el-button,
    > .el-button + span {
      margin-left: 15px;
    }
    .addBtn {
      padding: 10px 20px;
      margin-top: -5px;
      vertical-align: bottom;
      background-color: #2b57d9;
      border-color: #2b57d9;
      i {
        margin-right: 5px;
      }
    }
  }
  .summary-box {
    margin: 6px 0 0;
    border: 1px solid $border-color;
    border-radius: 4px;
    background-color: #ebf2f6;
    padding: 15px;
    line-height: 20px;
  }
}
// popover元素在body下
.tag-content-header-setting {
  max-height: 500px;
  overflow-y: auto;
  .content-setting-item {
    line-height: 30px;
  }
}
</style>
